<template>
  <div>
    <Card>
      <Tabs v-model="tabName" :animated="false" style="overflow: visible">
        <Form
          ref="zftForm"
          :model="zftForm"
          :label-width="130"
          label-position="right"
          :rules="shopValidate"
          @on-validate="formValidate"
          :disabled="formType === 'view'"
        >
          <TabPane label="直付通二级商户进件" class="tab" name="base">
            <template v-if="formType !== 'add'">
              <Row>
                <Col span="6">
                  <FormItem label="创建时间" prop="createTime">
                    <Input :value="detail.createTime" disabled />
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="创建人" prop="createBy">
                    <Input :value="detail.createBy" disabled />
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="更新时间" prop="updateTime">
                    <Input :value="detail.updateTime" disabled />
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="更新人" prop="updateBy">
                    <Input :value="detail.updateBy" disabled />
                  </FormItem>
                </Col>
              </Row>
              <Divider orientation="left">审核信息</Divider>
              <Row>
                <Col span="6">
                  <FormItem label="总体状态" prop="status">
                    <Tag v-if="detail.status == '99'" color="success">已完结</Tag>
                    <Tag v-else-if="detail.status == '-1'" color="error">失败</Tag>
                    <Tag v-else-if="detail.status == '031'" color="primary">审核中</Tag>
                    <Tag v-else>未进件</Tag>
                  </FormItem>
                </Col>
                <template v-if="detail.status != '0'">
                  <Col span="6">
                    <FormItem label="申请时间" prop="applyTime">
                      <Input :value="detail.applyTime" disabled />
                    </FormItem>
                  </Col>
                  <Col span="12">
                    <FormItem label="申请单号" prop="orderId">
                      {{ detail.orderId }}
                    </FormItem>
                  </Col>
                  <Col span="24" v-if="detail.status == '-1'">
                    <FormItem label="审核失败原因" prop="reason">
                      <Input :value="detail.fkAuditMemo" type="reason" disabled />
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="风控审核状态" prop="fkAudit">
                      <Tag v-if="detail.fkAudit == 'CREATE'" color="primary">待审批</Tag>
                      <Tag v-else-if="detail.fkAudit == 'SKIP'" color="green">跳过审核</Tag>
                      <Tag v-else-if="detail.fkAudit == 'PASS'" color="success">审核通过</Tag>
                      <Tag v-else-if="detail.fkAudit == 'REJECT'" color="error">审核未通过</Tag>
                      <Tag v-else>未进件</Tag>
                    </FormItem>
                  </Col>
                  <Col span="18">
                    <FormItem label="风控审批备注" prop="fkAuditMemo">
                      <Input :value="detail.fkAuditMemo" type="textarea" disabled />
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="客资审核状态" prop="fkAudit">
                      <Tag v-if="detail.kzAudit == 'CREATE'" color="primary">待审批</Tag>
                      <Tag v-else-if="detail.kzAudit == 'SKIP'" color="green">跳过审核</Tag>
                      <Tag v-else-if="detail.kzAudit == 'PASS'" color="success">审核通过</Tag>
                      <Tag v-else-if="detail.kzAudit == 'REJECT'" color="error">审核未通过</Tag>
                      <Tag v-else>未进件</Tag>
                    </FormItem>
                  </Col>
                  <Col span="18">
                    <FormItem label="客资审批备注" prop="kzAuditMemo">
                      <Input :value="detail.kzAuditMemo" type="textarea" disabled />
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="二级商户确认状态" prop="subConfirm">
                      <Tag v-if="detail.subConfirm == 'CREATE'" color="primary">已发起</Tag>
                      <Tag v-else-if="detail.subConfirm == 'SKIP'" color="green">无需确认</Tag>
                      <Tag v-else-if="detail.subConfirm == 'FINISH'" color="success">签约完成</Tag>
                      <Tag v-else-if="detail.subConfirm == 'FAIL'" color="error">签约失败</Tag>
                      <Tag v-else-if="detail.subConfirm == 'NOT_CONFIRM'" color="warning"
                        >商户未确认</Tag
                      >
                      <Tag v-else>未进件</Tag>
                    </FormItem>
                  </Col>
                </template>
              </Row>
            </template>
            <!-- 遮罩层  -->
            <div v-if="isRead" class="mask">只读不可修改</div>
            <Divider orientation="left">基本信息</Divider>
            <div>
              <FormItem label="店铺" prop="storeId">
                <Select
                  v-model="zftForm.storeId"
                  placeholder="输入关键字查询"
                  :remote-method="loadShopList"
                  filterable
                  clearable
                  style="width: 350px"
                  @on-clear="loadShopList"
                  @on-change="handleSelectShop"
                  :loading="shopLoading"
                >
                  <Option v-for="(item, index) in shops" :key="index" :value="item.id">{{
                    item.storeName
                  }}</Option>
                </Select>
              </FormItem>
              <FormItem label="签约支付宝账户" prop="bizContent.binding_alipay_logon_id">
                <Input
                  v-model="zftForm.bizContent.binding_alipay_logon_id"
                  clearable
                  style="width: 350px"
                />
                <div class="ivu-form-item-extra">
                  用于协议确认，及后续二级商户增值产品服务签约时使用。本字段要求与商户名称name同名(个体工商户可以与name或cert_name相同)，且是实名认证支付宝账户
                </div>
              </FormItem>
              <FormItem label="签约名称" prop="bizContent.name">
                <Input v-model="zftForm.bizContent.name" clearable style="width: 350px" />
                <div class="ivu-form-item-extra">
                </div>
              </FormItem>
              <FormItem label="签约别名" prop="bizContent.alias_name">
                <Input v-model="zftForm.bizContent.alias_name" clearable style="width: 350px" />
                <div class="ivu-form-item-extra">
                  支付宝收银台及账单中的商户名称会展示此处设置的别名。如果涉及支付宝APP内的支付，支付结果页也会展示该别名；如果涉及当面付场景，请填写线下店铺名称
                </div>
              </FormItem>
              <FormItem label="客服电话" prop="service_phone">
                <Input v-model="zftForm.bizContent.service_phone" clearable style="width: 350px" />
              </FormItem>
              <FormItem label="商户类别码" prop="bizContent.mcc">
                <Input v-model="zftForm.bizContent.mcc" clearable style="width: 200px" />
                <div class="ivu-form-item-extra">
                  商户类别码mcc，参见<a
                    target="_blank"
                    href="https://gw.alipayobjects.com/os/bmw-prod/e5dbb27b-1d8d-442e-be9e-6e52971ce7c3.xlsx"
                    >https://gw.alipayobjects.com/os/bmw-prod/e5dbb27b-1d8d-442e-be9e-6e52971ce7c3.xlsx</a
                  ><br />
                  特殊行业要按照MCC说明中的资质一栏上传辅助资质，辅助资质在qualifications字段中上传，会有人工审核
                </div>
              </FormItem>
              <Divider orientation="left">商户联系人信息</Divider>
              <FormItem label="联系人姓名" prop="bizContent.contact_infos.name">
                <Input
                  v-model="zftForm.bizContent.contact_infos.name"
                  clearable
                  style="width: 200px"
                />
              </FormItem>
              <FormItem label="联系人手机" prop="bizContent.contact_infos.mobile">
                <Input
                  v-model="zftForm.bizContent.contact_infos.mobile"
                  maxlength="11"
                  clearable
                  style="width: 200px"
                />
              </FormItem>
              <FormItem label="电子邮箱" prop="bizContent.contact_infos.email">
                <Input
                  v-model="zftForm.bizContent.contact_infos.email"
                  clearable
                  style="width: 200px"
                />
              </FormItem>
              <FormItem label="联系人座机" prop="bizContent.contact_infos.phone">
                <Input
                  v-model="zftForm.bizContent.contact_infos.phone"
                  maxlength="11"
                  clearable
                  style="width: 200px"
                />
              </FormItem>
              <FormItem label="身份证号" prop="bizContent.contact_infos.id_card_no">
                <Input
                  v-model="zftForm.bizContent.contact_infos.id_card_no"
                  clearable
                  style="width: 200px"
                />
              </FormItem>
              <Divider orientation="left">默认结算规则</Divider>

              <FormItem label="结算类型" prop="bizContent.biz_cards.default_settle_type">
                <RadioGroup
                  type="button"
                  button-style="solid"
                  v-model="zftForm.bizContent.default_settle_rule.default_settle_type"
                >
                  <Radio label="bankCard">银行卡</Radio>
                  <Radio label="alipayAccount">支付宝账号</Radio>
                </RadioGroup>
              </FormItem>
              <template
                v-if="zftForm.bizContent.default_settle_rule.default_settle_type == 'bankCard'"
              >
                <FormItem label="银行开户名" prop="bizContent.biz_cards.account_holder_name">
                  <Input
                    v-model="zftForm.bizContent.biz_cards.account_holder_name"
                    clearable
                    style="width: 200px"
                  />
                </FormItem>
                <FormItem label="账号使用类型" prop="bizContent.biz_cards.usage_type">
                  <RadioGroup
                    type="button"
                    button-style="solid"
                    v-model="zftForm.bizContent.biz_cards.usage_type"
                  >
                    <Radio label="01">对公</Radio>
                    <Radio label="02">对私</Radio>
                  </RadioGroup>
                </FormItem>
                <FormItem label="银行卡类型" prop="bizContent.biz_cards.account_type">
                  <RadioGroup
                    type="button"
                    button-style="solid"
                    v-model="zftForm.bizContent.biz_cards.account_type"
                  >
                    <Radio label="DC">借记卡</Radio>
                    <Radio label="CC">信用卡</Radio>
                  </RadioGroup>
                </FormItem>
                <FormItem label="银行账号" prop="bizContent.biz_cards.account_no">
                  <Input
                    v-model="zftForm.bizContent.biz_cards.account_no"
                    clearable
                    style="width: 200px"
                  />
                </FormItem>
                <FormItem label="银行开户行" prop="bizContent.biz_cards.account_inst_name">
                  <Input
                    v-model="zftForm.bizContent.biz_cards.account_inst_name"
                    clearable
                    style="width: 200px"
                  />
                  <div class="ivu-form-item-extra">例：招商银行</div>
                </FormItem>
                <FormItem label="省" prop="bizContent.biz_cards.account_inst_province">
                  <Input
                    v-model="zftForm.bizContent.biz_cards.account_inst_province"
                    clearable
                    style="width: 200px"
                  />
                  <div class="ivu-form-item-extra">开户行所在地-省，例：浙江省</div>
                </FormItem>
                <FormItem label="市" prop="bizContent.biz_cards.account_inst_city">
                  <Input
                    v-model="zftForm.bizContent.biz_cards.account_inst_city"
                    clearable
                    style="width: 200px"
                  />
                  <div class="ivu-form-item-extra">开户行所在地-省，例：杭州市</div>
                </FormItem>
                <FormItem label="银行开户行简称" prop="bizContent.biz_cards.account_inst_id">
                  <Input
                    v-model="zftForm.bizContent.biz_cards.account_inst_id"
                    clearable
                    style="width: 200px"
                  />
                  <div class="ivu-form-item-extra">开户行简称缩写，例：CMB</div>
                </FormItem>
                <FormItem label="银行支行名称" prop="bizContent.biz_cards.account_branch_name">
                  <Input
                    v-model="zftForm.bizContent.biz_cards.account_branch_name"
                    clearable
                    style="width: 200px"
                  />
                </FormItem>
                <FormItem label="支行联行号" prop="bizContent.biz_cards.bank_code">
                  <Input
                    v-model="zftForm.bizContent.biz_cards.bank_code"
                    clearable
                    style="width: 200px"
                  />
                </FormItem>
              </template>

              <Divider orientation="left">签约信息</Divider>
              <FormItem label="签约产品" prop="bizContent.service">
                <CheckboxGroup v-model="zftForm.bizContent.service">
                  <!-- <Checkbox label="当面付">当面付</Checkbox> -->
                  <Checkbox label="app支付">app支付</Checkbox>
                  <Checkbox label="wap支付">wap支付</Checkbox>
                  <Checkbox label="电脑支付">电脑支付</Checkbox>
                  <!-- <Checkbox label="线上资金预授权">线上资金预授权</Checkbox> -->
                  <!-- <Checkbox label="新当面资金授权">新当面资金授权</Checkbox> -->
                  <Checkbox label="小程序支付">小程序支付</Checkbox>
                </CheckboxGroup>
                <div class="ivu-form-item-extra">
                  商户站点信息，包括网站、app、小程序站点。使用电脑支付或wap支付服务时，必须填充一个类型为01(网站)的SiteInfo对象，site_type/site_url/site_name必填；使用app支付服务时，必须填充类型为02(APP)或06(支付宝小程序)的SiteInfo对象，site_type/site_name必填
                </div>
              </FormItem>
              <Row>
                <Col span="6">
                  <FormItem label="网站类型" prop="bizContent.sites.site_type">
                    <Select v-model="zftForm.bizContent.sites.site_type">
                      <Option value="01">网站</Option>
                      <Option value="02">APP</Option>
                      <Option value="03">服务窗</Option>
                      <Option value="04">公众号</Option>
                      <Option value="06">支付宝小程序</Option>
                      <Option value="05">其他</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="站点名称" prop="bizContent.sites.site_name">
                    <Input v-model="zftForm.bizContent.sites.site_name" clearable />
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="站点地址" prop="bizContent.sites.site_url">
                    <Input v-model="zftForm.bizContent.sites.site_url" clearable />
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="测试账号" prop="bizContent.sites.account">
                    <Input v-model="zftForm.bizContent.sites.account" clearable />
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="测试密码" prop="bizContent.sites.password">
                    <Input v-model="zftForm.bizContent.sites.password" clearable />
                  </FormItem>
                </Col>
              </Row>
            </div>
          </TabPane>
        </Form>
      </Tabs>
      <div align="center" v-if="formType !== 'view'">
        <Button type="success" @click="save(false)"> 保存 </Button>
        <Divider type="vertical"></Divider>
        <Button type="primary" @click="save(true)"> 提交 </Button>
        <!-- && status == '99'" -->
        <template v-if="formType == 'edit'">
          <Divider type="vertical"></Divider>
          <Button type="warning" @click="updateSettleRule()"> 只修改结算规则 </Button>
        </template>
      </div>
    </Card>

    <Modal width="1200px" v-model="picModalFlag">
      <ossManage @callback="callbackSelected" ref="ossManage" />
    </Modal>
  </div>
</template>

<script>
import ossManage from "@/views/sys/oss-manage/ossManage";
import {
  shopDetail,
  save,
  update,
  getShopListData,
  detail,
  updateSettleRule,
} from "@/api/shops-zft";
import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
import region from "@/views/lili-components/region";
import liliMap from "@/views/my-components/map/index";

export default {
  name: "shop-operation",
  components: {
    uploadPicInput,
    ossManage,
    region,
    liliMap,
  },

  data() {
    return {
      formType: this.$route.query.formType || "view",
      zftId: this.$route.query.id, // 店铺id
      isRead: false, // 是否只读，只有在店铺通过审核才可修改
      selectedFormBtnName: "", // 点击图片绑定form
      loading: false,
      picModalFlag: false, // 图片选择器
      tabName: "base", // tab栏name值
      tabNameList: ["base"], // tab栏name值数组
      shopValidate: {
        // 表单验证规则
        storeId: [{ required: true, message: "店铺不能为空" }],
        "bizContent.alias_name": [{ required: true, message: "商户别名不能为空" }],
        "bizContent.binding_alipay_logon_id": [
          { required: true, message: "签约支付宝账户不能为空" },
        ],
        "bizContent.mcc": [{ required: true, message: "商户类别码不能为空" }],
        "bizContent.contact_infos.name": [{ required: true, message: "联系人姓名不能为空" }],
        "bizContent.contact_infos.mobile": [
          { required: true, message: "联系人手机号不能为空" },
          {
            type: "string",
            pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
            message: "手机号格式出错",
            trigger: "blur",
          },
        ],
        "bizContent.contact_infos.email": [
          { required: true, message: "邮箱不能为空" },
          { type: "email", message: "邮箱格式错误" },
        ],
        "bizContent.biz_cards.account_holder_name": [
          { required: true, message: "银行开户名不能为空" },
        ],
        "bizContent.biz_cards.account_no": [{ required: true, message: "银行账号不能为空" }],
        "bizContent.biz_cards.account_branch_name": [
          { required: true, message: "银行支行名称不能为空" },
        ],
        "bizContent.biz_cards.account_inst_province": [
          { required: true, message: "开户行所在地-省不能为空" },
        ],
        "bizContent.biz_cards.account_inst_city": [
          { required: true, message: "开户行所在地-市不能为空" },
        ],
        "bizContent.biz_cards.usage_type": [{ required: true, message: "账号使用类型不能为空" }],
        "bizContent.biz_cards.account_type": [{ required: true, message: "卡类型不能为空" }],
        "bizContent.biz_cards.account_inst_name": [{ required: true, message: "银行名称不能为空" }],
        "bizContent.biz_cards.account_inst_id": [
          { required: true, message: "开户行简称缩写不能为空" },
        ],
        "bizContent.sites.site_type": [{ required: true, message: "请选择网站类型" }],
      },
      zftForm: {
        storeId: "",
        bizContent: {
          biz_cards: {
            usage_type: "01",
            account_type: "DC",
          },
          contact_infos: {},
          default_settle_rule: {
            default_settle_type: "alipayAccount",
          },
          sites: {},
        },
      },
      shopLoading: true,
      shops: [],
      detail: {},
      picIndex: "", // 存储身份证图片下标，方便赋值
    };
  },
  methods: {
    // 选择图片modal
    handleCLickImg(val, index) {
      this.$refs.ossManage.selectImage = true;
      this.picModalFlag = true;
      this.selectedFormBtnName = val;
      this.picIndex = index;
    },
    // 图片回显
    callbackSelected(val) {
      this.picModalFlag = false;
      if (this.picIndex === 0 || this.picIndex === 1) {
        this.zftForm[this.selectedFormBtnName][this.picIndex] = val.url;
      } else {
        this.zftForm[this.selectedFormBtnName] = val.url;
      }
      this.picIndex = "";
    },
    // 初始化数据
    async init() {
      this.loadShopList();
      if (this.zftId) {
        const res = await detail(this.zftId);
        const { result, success } = res;

        if (success) {
          this.zftForm = {
            bizContent: JSON.parse(result.bizContent),
            storeId: result.storeId,
          };
          this.detail = result;
        }
        // console.log(res);
      }
    },
    formValidate(prop, status, error) {},
    async loadShopList(query = "") {
      this.shopLoading = true;
      try {
        const response = await getShopListData({ keyword: query });
        if (response.success) {
          this.shops = response.result;
        }
      } finally {
        this.shopLoading = false;
      }
    },
    handleSelectShop(value) {
      if (value) {
        this.$Modal.confirm({
          title: "提示",
          content: "<p>是否加载店铺已有信息并填充？</p>",
          onOk: () => {
            this.getShopDetail(value);
          },
          onCancel: () => {},
        });
      }
    },
    // 获取店铺详情
    async getShopDetail(shopId) {
      const res = await shopDetail(shopId);
      if (res.success) {
        const result = res.result;
        const bizContent = {
          alias_name: result.storeName,
          service_phone: result.companyPhone,
          biz_cards: {
            ...this.zftForm.bizContent.biz_cards,
            account_holder_name: result.settlementBankAccountName,
            account_no: result.settlementBankAccountNum,
            account_branch_name: result.settlementBankBranchName,
            bank_code: result.settlementBankJointName,
          },
          contact_infos: {
            ...this.zftForm.bizContent.contact_infos,
            email: result.companyEmail,
            mobile: result.linkPhone,
            name: result.linkName,
          },
        };
        this.zftForm.bizContent = {
          ...this.zftForm.bizContent,
          ...bizContent,
        };
      }
    },
    updateSettleRule() {
      this.$refs.zftForm.validate(async valid => {
        if (valid) {
          const params = {
            ...this.zftForm,
          };
          const { bizContent } = params;
          params.bizContent = JSON.stringify(bizContent);
          const res = await updateSettleRule(this.zftId, params);
          if (res.success) {
            this.$Message.success("编辑成功");
            this.$router.push({ name: "shopZft" });
          }
        } else {
          this.$Message.error("表单验证未通过，请检查");
        }
      });
    },
    // 保存
    save(isSubmit = false) {
      this.$refs.zftForm.validate(async valid => {
        if (valid) {
          const params = {
            ...this.zftForm,
          };
          const { bizContent } = params;
          params.isSubmit = isSubmit;
          params.bizContent = JSON.stringify(bizContent);
          if (this.formType == "edit") {
            const res = await update(this.zftId, params);
            if (res.success) {
              this.$Message.success("编辑成功");
              this.$router.push({ name: "shopZft" });
            }
          } else if (this.formType == "add") {
            const res = await save(params);
            if (res.success) {
              this.$Message.success("添加成功");
              this.$refs.zftForm.reset();
              this.$router.push({ name: "shopZft" });
            }
          }
        } else {
          this.$Message.error("表单验证未通过，请检查");
        }
      });
    },
  },
  created() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.selectedMember {
  width: 100%;
}

.mask {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(105, 105, 105, 0.1);
  z-index: 9;
}

/deep/ .ivu-tabs-bar {
  margin: 0;
}

.tab {
  padding: 16px;
  position: relative;
}

.categories-checkbox {
  display: flex;
  align-items: center;
}

.img {
  margin-right: 10px;
  width: 100px;
  height: 100px;
}

.item {
  width: 350px !important;
  display: flex;

  > * {
    margin: 0 4px;
  }
}
.legal-photo {
  width: 100px;
  height: 100px;
  cursor: pointer;
}
</style>
